import React, { Component } from 'react'
import '@/App.css'
export default class App extends Component {
  constructor(){
    super()
    this.state={
      message:{
        contents:'',
        degree:0,
        sendto:0
      }
    }
  }
  handleInputContent=(e)=>{
    this.setState({
      message:{
        ...this.state.message,
        contents:e.target.value
      }
    })
  }
  handleDegree=(e)=>{
    this.setState({
      message:{
        ...this.state.message,
        degree:+e.target.value
      }
    })
  }
  handleSendto=(e)=>{
    this.setState({
      message:{
        ...this.state.message,
        sendto:+e.target.value
      }
    })
  }
  render() {
    return (
      <div>
        <div>
          <div className='item'>
             <label htmlFor="contents">消息内容</label>
             <textarea name="" id="contents" cols="30" rows="5" 
                       value={this.state.message.contents}
                       onChange={this.handleInputContent}></textarea>
          </div>
          <div className='item'>
              <label htmlFor="">重要程度</label>
              <input type="radio" name="degree" value={0} onChange={this.handleDegree} checked={this.state.message.degree===0?true:false}/>重要
              <input type="radio" name="degree" value={1} onChange={this.handleDegree} checked={this.state.message.degree===1?true:false}/>一般
          </div>
          <div className='item'>
            <label htmlFor="">发送对象</label>
            <input type="radio" name="sendto" value={0} onChange={this.handleSendto} checked={this.state.message.sendto===0?true:false}/>所有人
            <input type="radio" name="sendto" value={1} onChange={this.handleSendto} checked={this.state.message.sendto===1?true:false}/>所有顾客
            <input type="radio" name="sendto" value={2} onChange={this.handleSendto} checked={this.state.message.sendto===2?true:false}/>所有商家
          </div>
          <div><button>提交</button></div>
        </div>
      </div>
    )
  }
}
